<template>
    <div class="com-container" @dblclick="revertMap">       
        <!-- 显示图表 -->
        <div class="com-chart" ref="map_ref">

        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import axios from "axios";
    import {getProvinceMapInfo} from '@/utils/map_utils'
export default {
    data() {
        return {
            chartInstance:null,
            //服务器获取数据
            allData:null,
            //地图缓存
            mapTempData:{},
        }
    },
    created(){
        //回调函数的注册
        this.$socket.registerCallBack('mapData',this.getData)
    },
    mounted() {
        this.initChart()
        // this.getData()
        this.$socket.send({
            action:'getData',
            socketType:'mapData',
            chartName:'map',
            value:''
        })
        //分辨率适配
        window.addEventListener('resize',this.screenAdapter)
        this.screenAdapter()
    },
    destroyed(){
        //取消监听
        window.removeEventListener('resize', this.screenAdapter)
        //回调函数的取消
        this.$socket.unRegisterCallBack("mapData")
    },
    methods: {
        async initChart(){
           this.chartInstance = this.$echarts.init(this.$refs.map_ref,this.theme)
            //获取中国地图的矢量数据 pubilc/map 省地图 
            // 接口http://localhost:8999/static/map/china.json
            const res = await axios.get('http://localhost:8999/static/map/china.json')
                console.log(res)
            //地图数据源的配置
            this.$echarts.registerMap('china',res.data)
            const initOption = {
                title:{
                    text:'▎商家分布',
                    left:20,
                    top:20,
                },
                //地图框架配置
                geo:{
                    type:'map',
                    map:'china',
                    top:'5%',
                    bottom:'5%',
                    layoutSize: 370,
                    // aspectScale: 1, // 比例
                    //允许拖动及缩放
                    // roam: true,
                    regions: [
                        {
                            name: "南海诸岛",
                            label: {
                            show: true, // 隐藏文字                         
                            padding:[0,-50,-120,0],
                            },
                            
                        }
                        ],
                
                    itemStyle:{
                        //地图颜色配置
                        areaColor:'#2E72BF',
                        //间隔颜色
                        borderColor:'#333'

                    },
                    label: {
                        show: true,
                        color: 'white',                      
                        formatter: `{a}`,                      
                        emphasis: { // 高亮时样式
                            color: "#9900FF"
                        }
                    },
                },
                legend:{
                    left:'5%',
                    bottom:'5%',
                    //图例垂直排列
                    orient:'vartical'
                }
            }
            this.chartInstance.setOption(initOption)
            //  arg点击参数信息
            this.chartInstance.on('click',async arg=>{
                // arg.name
                console.log('点击地图'+" "+arg.name)
                const provinceInfo = getProvinceMapInfo(arg.name)               
                console.log(provinceInfo.key)//拼音provinceInfo.key

                //判断点击的省份在缓存中是否存在 节流效果
                if(!this.mapTempData[provinceInfo.key]){
                    //获取该省份的地图矢量数据
                    if(provinceInfo.key == undefined){
                        //如果是某个省份地图 应该不发起网络请求
                        return
                    }  
                    const res =await axios.get('http://localhost:8999'+provinceInfo.path)             
                    this.mapTempData[provinceInfo.key] = res.data
                    // console.log(res)
                    console.log(provinceInfo)
                    this.$echarts.registerMap(provinceInfo.key,res.data)
                }
                //点击的省份信息
                const changeOption = {
                    geo:{
                        map:provinceInfo.key
                    }
                }
                this.chartInstance.setOption(changeOption)            
            })
         },
         async getData(res){
                // const {data:res} =  await this.$http.get('map')
                this.allData =res
                console.log(this.allData)
                this.updateChart()
         },
         updateChart(){
            //处理数据
            //图例数据
            const legendArr = this.allData.map(item => {
                return item.name
            })
            const seriesArr = this.allData.map((item)=>{
                return {
                    //一个类别多个散点图
                    //在地图显示散点数据，在散点图表增加一个配置coordinateSystem：geo
                    type:'effectScatter',
                    rippleEffect:{
                        //散点的涟漪效果
                        scale:10,
                        brushType:'stroke'
                    },
                    name:item.name,
                    data:item.children,
                    //散点使用坐标系统
                    coordinateSystem:'geo'
                }
            })
            const dataOption = {
                legend:{
                    data: legendArr,
                },
                series:seriesArr
            }   
            this.chartInstance.setOption(dataOption)
         },
         screenAdapter(){
            const titleFontSize = this.$refs.map_ref.offsetWidth / 100 * 3.6
            const adapterOption = {
                title:{
                    textStyle:{
                        fontSize: titleFontSize
                    }
                },
                legend:{
                    itemWidth: titleFontSize,
                    itemHeight: titleFontSize/2,
                    // itemGap: this.titleFontSize/2,
                    textStyle:{
                        fontSize: titleFontSize/2
                    }
                }
            }
            this.chartInstance.setOption(adapterOption)
            //自适应
            this.chartInstance.resize()

         },
         //双击回原地图方法
         revertMap(){
            const revertOption = {
                geo:{
                    map:'china'
                }
            }
            this.chartInstance.setOption(revertOption)
         }
    },
    computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme () {
      console.log('主题切换了')
      this.chartInstance.dispose() // 销毁当前的图表
      this.initChart() // 重新以最新的主题名称初始化图表对象
      this.screenAdapter() // 完成屏幕的适配
      this.updateChart() // 更新图表的展示
    }
  }
}
</script>

<style>

</style>